<template>
  <view class="styleContainer" :style="{ backgroundImage: 'url(' + srcBg + ')' }">
    <view :style="{ height: titleBarMarginTop }"></view>
    <view class="styleTopContainer">
      <view class="styleTitleContainer">
        <view class="styleTitleLeft">
          <image class="styleGoBack" :src="srcGoBack" @click="clickBack" v-if="pagesLength >= 2"></image>
          <image class="styleGoBack" :src="srcGoHome" @click="clickHome" v-else></image>
        </view>
      </view>
      <view class="aititle" v-if="from != 'zhadui'">
        <view class="aititle-text">AI面评</view>

        <view v-show="current != 2" class="aititle-task" v-if="personId.length > 0">
          剩余解锁次数
          <text class="aititle-on">{{
            from == 'sxh' ? '999+' : getRemainCount()
          }}</text>
        </view>
        <view v-show="current != 2" class="aititle-task" v-else>
          剩余解锁次数 <text class="aititle-on">0</text>
        </view>
      </view>
    </view>
    <TabsSwiper :tabList="tabList" ref="tabsSwiper" :current="current" bgColor="transparent" tabsWidth="612"
      marginLeft="10" :scale="barScale" @tabsChange="tabsChange" class="myscrollView" />
    <swiper class="swiper-box" :duration="200" :current="swiperCurrent" @transition="handleTransition"
      @animationfinish="handleAnimation">
      <swiper-item class="swiper-item">
        <view class="styleSearchContainer" @click="clickSearch" v-if="!isInputMode">
          <u-input class="styleInput" placeholder="搜索要进行面评的职业" :focus="isFocus" v-model="inputText" :clearable="false"
            :placeholder-style="placeholderStyle" @click="clickInput" disabled />
          <image class="styleSearchIcon" :src="srcInputSearchIcon"></image>
        </view>
        <view class="styleSearchInputModeContainer" v-else>
          <u-input class="styleInput" placeholder="搜索要进行面评的职业" :focus="inputModeIsFocus" v-model="inputModeText"
            :clearable="false" :placeholder-style="placeholderStyle" @input="onInputChanged" @blur="onBlur" />
          <view class="styleClearContainer">
            <image class="styleClearIcon" :src="srcInputSearchClose" @click="clickClear" v-if="isShowClear"></image>
            <view class="styleCancelText" @click="clickCancel">取消</view>
          </view>
        </view>

        <view class="styleMajorList" v-if="isShowMajorList" @click="clickScrollView">
          <scroll-view class="styleScrollView" scroll-y="true" @scrolltoupper="onRefresh" @scrolltolower="onLoadMore"
            @scroll="onScroll" :upper-threshold="50" :lower-threshold="50">
            <view class="styleItem" v-for="(item, index) in list" :key="index" @click="clickMajorItem(item)">
              <rich-text class="styleName" :nodes="highLightText(item.positionName)"></rich-text>
              <view class="styleLine" v-if="index != list.length - 1"></view>
            </view>
            <view class="styleBottom" v-if="isShowBottom"></view>
          </scroll-view>
        </view>

        <view class="styleEmpty" @click="clickEmptyPage" v-if="isShowEmpty" :style="{ height: contentHeight }">没有找到符合的内容
        </view>

        <MajorFilterAI v-show="isShowMajorFilter" @needlogin="needloginAction" :cateType="majorListParam.cateType"
          :rectTop="searchBottom" :from="from" :showHome="showHome" :specialStyle="{ height: contentHeight }"
          @closeBubble="closeBubble" ref="filterListRef" :pointHome="isPointHome" :channel="channel"
          @onGoToInterview="showConfirmCancelDialog" :rightNumData="rightNumData" :productSign="productSign"
          :personId="personId" />
      </swiper-item>
      <swiper-item class="swiper-item">
        <view id="swiper-item-1">
          <InterviewListAI ref="interviewListAI" :personId="personId" @updateUserNum="updateUserNum"
            :modelType="modelType" @showUnlockRightDialog="showUnlockRightDialog" :fromSxh="from" />
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view id="swiper-item-2">
          <InterviewTopicList :personId="personId" @updateUserNum="updateUserNum" :modelType="modelType" />
        </view>
      </swiper-item>
    </swiper>
    <!-- 如果来自双选会 -->
    <template v-if="from == 'sxh' || from == 'fromSxhQrCode'">
      <view class="btn-box">
        <view class="check-btn" @click="returnSxhHome">返回首页</view>
      </view>
    </template>
    <template v-else>
      <view class="footer-wrapper" v-if="
          productSign == 'ZHITU_TOC_SERVICE' && canbuy && swiperCurrent == 1
        ">
        <template v-if="showPackageBtn">
          <view class="buyPackage" @click="showBuyList">
            职途权益套餐
            <view class="least-price" v-if="showLeastPrice == 0"></view>
          </view>
          <view class="buySingle" @click="handleBottomBtnClick">单次购买 <view style="margin-left: 24rpx">￥</view>
            {{ leastPrice }}
            <view>/份 </view>
          </view>
        </template>
        <view v-if="!showPackageBtn && leftUseCount <= 0" class="btn-box">
          <view class="check-btn" @click="handleBottomBtnClick">单次购买 <text style="margin-left: 24rpx">￥</text>
            {{ leastPrice }}/份
          </view>
        </view>
      </view>
    </template>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
    <CareermatchPopup :show="popupIsShow" :data="popupArray" @close="popupIsShow = false"
      @changeClick="clickPopupChange" @didClick="goToAIInterviewWithItem"></CareermatchPopup>
    <u-modal v-model="isConfirmCancelModalShow" :content="content" :confirm-text="confirmText" :cancel-text="cancelText"
      :show-cancel-button="true" @confirm="onClickConfirm" :mask-close-able="true" :title="titleText"
      @cancel="onClickCancel"></u-modal>

    <ShoppingCar v-if="showPopup" :showPopup="showPopup" @closePopup="closePopup"></ShoppingCar>
    <UnlockRightDialog v-if="isUnlockDialog" @onUnlockRightDialogClose="onUnlockRightDialogClose"
      @onUnlockRightDialogCancel="onUnlockRightDialogCancel" @onUnlockRightDialogUnlock="onUnlockRightDialogUnlock">
    </UnlockRightDialog>
  </view>
</template>
<script>
import { env } from "@/api/root.js";
import {
  matchPositionListNew,
  getPersonOneRight,
  addCartAndToOrder,
  addZhituPayOrder,
  getCardRightPackage,
  getPersonRightNum,
  getRightSingleProduct,
  getProductGroup,
  cardRegist,
} from "@/api/modules/career";
import { getpositionTagAndParentList } from "@/api/modules/major";
import MajorFilterAI from "./components/MajorFilterAI.vue";
import CareermatchPopup from "./components/CareermatchPopup.vue";
import InterviewListAI from "./components/InterviewListAI.vue";
import InterviewTopicList from "./components/InterviewTopicList.vue";
import ShareMixin from "@/mixins/share";
import TabsSwiper from "./components/TabsSwiper.vue";
import { extractParams } from "@/utils/handle.js";
import LoginDialog from "@/components/LoginDialog";
import ShoppingCar from "./components/ShoppingCar.vue";
import UnlockRightDialog from "./components/UnlockRightDialog.vue";

import {
  reqZhituGetCareer,
  reqZhaduiGetCareer,
  reqZhituHasFinished,
  refAddPoint,
  reqRecommendPosition,
  unlockInterviewResult,
} from "@/api/modules/company.js";
export default {
  mixins: [ShareMixin],
  components: {
    MajorFilterAI,
    TabsSwiper,
    InterviewListAI,
    InterviewTopicList,
    LoginDialog,
    CareermatchPopup,
    ShoppingCar,
    UnlockRightDialog,
  },

  data() {
    return {
      showLeastPrice: 0,
      canbuy: true,
      leastPrice: 0,
      rightSingleProductId: "",
      rightProductId: "",
      rightId: 17,
      rightNumData: {},
      productSign: "",
      currentPackage: 0,
      showPopup: false,
      popupArray: [],
      popupIsShow: false,
      popupPageNo: 1,
      shareTitle: "AI智能面试，了解自己的能力差距，提高个人水平和自信心。",
      pagesLength: 0,
      isFocus: false,
      inputModeIsFocus: true,
      inputText: "",
      inputModeText: "",
      degreeText: "本科",
      isInputMode: false,
      isShowClear: false,
      isShowMajorList: false,
      isShowEmpty: false,
      isShowBubble: false,
      isShowMajorFilter: true,
      srcGoBack:
        this.$imgBaseSelf + "career/positionDictionary/major_go_back.webp",
      srcGoHome: this.$imgBaseSelf + "home-b.png",
      srcInputSearchIcon:
        this.$imgBaseSelf + "career/positionDictionary/input_search_icon.webp",
      srcMajorTriangle:
        this.$imgBaseSelf + "career/positionDictionary/major_triangle.webp",
      srcInputSearchClose:
        this.$imgBaseSelf + "career/positionDictionary/input_seach_close.webp",
      placeholderStyle:
        "color: rgba(0,0,0,0.25);font-weight:400;font-size:28rpx;",
      list: [],
      positionTree: [],
      loadingType: "loadmore", //"normal",
      isFirstLoad: true,
      majorListParam: {
        cateType: "20",
        pageNo: 1,
        pageSize: 20,
        pages: 0,
      },
      statusBarHeight: 0,
      titleBarMarginTop: 0,
      bubbleMarginTop: 0,
      contentHeight: 0,
      isHome: true,
      srcBg:
        this.$imgBaseSelf +
        "career/positionDictionary/bg_major_searchhome.webp",
      isShowBottom: false,
      sharePath: "/pagesSub/companyCenter/interviewAI/majorSearchAI",
      isShowAnim: false,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      userNum: 0,
      rightCount: 0,
      selectedPageIndex: 0,

      tabList: [
        {
          name: "线上面评",
        },
        {
          name: "我的结果",
        },
        {
          name: "面试题库",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      barScale: 1,
      swiperHeight: 400,
      screenWidth: 412,
      searchBottom: 0,
      from: "",
      tabPosition: "",
      modelType: "",
      showHome: false,
      channel: "",
      isPointHome: false,
      isConfirmCancelModalShow: false,
      content: "您之前未完成本场面试，是否加载历史进度继续面试？",
      record: "",
      confirmText: "继续面试",
      cancelText: "重新面试",
      titleText: "温馨提示",
      positionId: "",
      type: "",
      infoId: "",
      provider: {},
      isUnlockDialog: false,
      selectedResultItem: {},
      showPackageBtn: false,
      leftUseCount: 0,
    };
  },
  computed: {
    // 是否人企沟通
    isConsultant() {
      return getApp().globalData.loginStatus == "consultant";
    },
  },
  created() {
    // console.log("majorSearchAI created");
    if (!uni.getStorageSync("cardType")) {
      if (env == "test") {
        this.cardType = 54;
        uni.setStorageSync("cardType", 54);
      } else if (env == "pro") {
        this.cardType = 28;
        uni.setStorageSync("cardType", 28);
      }
    }
    if (this.from == "fromSxhQrCode") {
      this.cardType = 66;
      uni.setStorageSync("cardType", this.cardType);
      this.cardRegistFn();
      this.getPersonRightNumFn();
      // setTimeout(() => {
      //   this.tabsChange(1);
      // }, 800);
    }
    //获取支付提供商
    uni.getProvider({
      service: "payment",
      success: (res) => {
        this.provider = res.provider;
        // console.log("this.provider", this.provider);
      },
    });
    this.pagesLength = getCurrentPages().length;
    this.getRightUseNumber();
    this.getCardRightPackageFn();
    this.getPersonRightNumFn();
    this.getRightSingleProductFn();
  },
  onLoad(opt) {
    console.log("majorSearchAI onLoad:", opt);
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "",
    });
    this.rightCount = opt.rightCount || 3;
    // 考虑顾问进入来看别人结果的情况，而且有可能是从职途管理后台跳过来的
    // 很重要的一点！存在要查看opt传入的personId的情况
    // 所以这个页面下的组件都要尽量用这个personId,不要在子组件中重新定义，或者使用uni.getStorage中的

    this.from = opt.fromSxh;
    if (this.from == "fromSxhQrCode") {
      this.cardType = 66;
      uni.setStorageSync("cardType", this.cardType);
      // setTimeout(() => {
      //   this.tabsChange(1);
      // }, 800);
      this.cardRegistFn();
      this.getPersonRightNumFn();
    }
    if (this.from == "fromZTJQrCode") {
      this.getPersonRightNumFn();
    }
    if (opt.rightPersonId && opt.fromSxh == "sxh") {
      this.cardType = 66;
      uni.setStorageSync("cardType", this.cardType);
      this.personId = uni.getStorageSync("SxhPersonId");
      setTimeout(() => {
        this.tabsChange(0);
      }, 800);
    } else if (opt.rightPersonId) {
      this.personId = opt.rightPersonId;
      //从职途管理后台进来是看别人的结果 所以不应该出现个购买按钮
      this.canbuy = false;
      setTimeout(() => {
        this.tabsChange(1);
      }, 800);
    } else {
      this.recommendPosition();
      this.needloginAction();
    }
    if (opt) {
      if (opt.fromtag && opt.fromtag == "home") {
        this.isPointHome = true;
        this.pointCount(3);
      }
      if (opt.from == "zhadui") {
        this.from = opt.from;
        this.personId = opt.personId;
        this.modelType = "demonstrate";
        console.log("onLoad this.from", this.from, opt.personId);
        this.showHome = true;
      } else if (opt.scene) {
        this.tabPosition = opt.scene;
        if (this.tabPosition == "tabResult") {
          this.from = "zhadui";
          this.$nextTick(() => {
            let current = 1;
            this.$refs.tabsSwiper.$refs.tabs.setFinishCurrent(current);
            this.swiperCurrent = current;
            this.modelType = "demonstrate";
            this.showHome = false;
          });
          console.log("切换我的结果页");
        } else {
          const scene = decodeURIComponent(opt.scene);
          const params = extractParams(scene);
          this.from = params["from"] || "";
          if (this.from == "zhadui") {
            this.modelType = "demonstrate";
            this.swiperCurrent = 0;
            this.current = 0;
            this.showHome = false;
          }
        }
      }
      this.channel = opt.channel;
    }

    this.zhituGetStartInfo();
    this.getSearchBottom();
    this.commitBuringPoint();

    wx.reportEvent("ai_major_zhitu", {
      come_from: this.from | "zhitu",
    });
  },
  onShow() {
    let key = "TabResultKey";
    var value = uni.getStorageSync(key);
    if (value && value == 1) {
      uni.setStorageSync(key, "");
      setTimeout(() => {
        this.$nextTick(() => {
          let current = 1;
          this.$refs.tabsSwiper.$refs.tabs.setFinishCurrent(current);
          this.swiperCurrent = current;
          this.$bus.$emit("updateContentInterviewListAI", true);
          this.getPersonRightNumFn();
        });
      }, 2000);
    }
  },
  mounted() {
    // console.log("majorSearchAI mounted");
    this.getStatusBarHeight();
  },

  methods: {
    async getProductGroupFn() {
      const params = {
        personId: this.personId || undefined,
        id: "1",
        unlockTypeList: [10, 20, 30, 40],
        productSignList: ["ZHITU_TOC_SERVICE"],
      };
      const res = await getProductGroup(params);
      if (res.code == 200) {
        this.showPackageBtn = !res.data.length || !!res.data[0].productList;
      }
    },
    getRemainCount() {
      let count = 0;
      if (this.productSign == "ZHITU_TOC_SERVICE") {
        console.log(this.rightNumData.ownNum, this.rightNumData.useNum);
        count = this.rightNumData.ownNum - this.rightNumData.useNum;
      } else {
        console.log(this.rightCount, this.userNum);
        count = this.rightCount - this.userNum;
      }
      console.log("count:" + count);
      this.leftUseCount = +count;
      return count;
    },
    unlockResult(recordId) {
      let params = {
        personId: this.personId,
        recordId: recordId,
      };
      console.log("unlockResult:" + recordId);
      unlockInterviewResult(params).then((res) => {
        if (res.code == 200) {
          uni.navigateTo({
            url:
              "/pagesSub/companyCenter/interviewAI/interviewResult?objId=" +
              recordId +
              "&from=zhitu",
          });
          if (this.productSign == "ZHITU_TOC_SERVICE") {
            this.rightNumData.useNum++;
          } else {
            this.userNum++;
          }
          this.$refs.interviewListAI.onRefresh(true);
        }
      });
    },
    showUnlockRightDialog(resultItem) {
      console.log("showUnlockRightDialog", resultItem);
      this.selectedResultItem = resultItem;
      if (this.productSign == "ZHITU_TOC_SERVICE") {
        console.log(
          this.productSign +
            " " +
            this.rightNumData.useNum +
            " " +
            this.rightNumData.ownNum
        );
        if (this.rightNumData.useNum < this.rightNumData.ownNum) {
          this.isUnlockDialog = true;
        } else {
          uni.showToast({
            title: "权益次数不足~",
            icon: "none",
          });
        }
      } else {
        console.log(
          this.productSign + " " + this.userNum + " " + this.rightCount
        );
        if (this.userNum < this.rightCount) {
          this.isUnlockDialog = true;
        } else {
          uni.showToast({
            title: "权益次数不足~",
            icon: "none",
          });
        }
      }
    },
    onUnlockRightDialogClose() {
      console.log("onUnlockRightDialogClose");
      this.isUnlockDialog = false;
    },
    onUnlockRightDialogCancel() {
      console.log("onUnlockRightDialogCancel");
      this.isUnlockDialog = false;
    },
    onUnlockRightDialogUnlock() {
      console.log("onUnlockRightDialogUnlock", this.selectedResultItem);
      this.isUnlockDialog = false;
      if (this.selectedResultItem) {
        this.unlockResult(this.selectedResultItem.id);
      }
    },
    async getRightSingleProductFn() {
      const params = {
        cardType: uni.getStorageSync("cardType"),
        rightId: this.rightId,
      };
      const res = await getRightSingleProduct(params);
      if (res.code == 200) {
        // console.log("res", res);
        this.rightSingleProductId = res.data.mallProductId;
        this.rightProductId = res.data.id;
        this.leastPrice = res.data.price;
      }
    },
    async getPersonRightNumFn() {
      const params = {
        personId: this.personId || undefined,
        rightId: this.rightId,
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await getPersonRightNum(params);
      if (res.code == 200) {
        this.rightNumData = res.data;
        console.log("this.rightNumData", this.rightNumData);
      }
    },
    async getCardRightPackageFn() {
      const params = {
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await getCardRightPackage(params);
      if (res.code == 200) {
        if (res.data.length > 0) {
          let value = res.data[0];
          this.productSign = value.productSign;
          this.showLeastPrice = res.data[0].isFree;
        }
      }
    },
    //1.生成订单
    addCartAndToOrder() {
      uni.showLoading({
        title: "生成订单中...",
        mask: true,
      });
      addCartAndToOrder({
        orderType: "ZT_SERVICE",
        mallProductId: this.rightSingleProductId,
        channelType: 81,
        sourceType: 3,
        personId: this.personId || undefined,
        rightId: this.rightId,
        cardType: uni.getStorageSync("cardType"),
        orderCondition: {
          rightProductId: this.rightProductId,
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.addZhituPayOrder(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || "生成订单失败",
              icon: "none",
              duration: 2000,
            });
          }
        })

        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || "生成订单失败",
            icon: "none",
            duration: 2000,
          });
        })
        .finally(() => {});
    },
    //2.通过订单获取支付信息
    addZhituPayOrder(data) {
      addZhituPayOrder({
        ...data,
        orderType: "ZT_SERVICE",
        wayCode: "WX_LITE",
        personId: this.personId,
        personName: uni.getStorageSync("personName"),
        openId: uni.getStorageSync("openid"),
      })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.requestPayment(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || "获取商品信息失败",
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || "获取商品信息失败",
            icon: "none",
            duration: 2000,
          });
        })
        .finally(() => {});
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf("wxpay") < 0) {
        return;
      }
      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          // this.handlePaySuccess(res);
          // uni.redirectTo({
          //   url: `/pagesSub/careerNew/zhituPaytoC/paySuccess?rightId=${this.rightId}&cardType=${this.cardType}`,
          // });
          uni.showToast({
            title: "购买成功",
            icon: "none",
            duration: 2000,
          });
          // 购买成功之后刷新次数
          this.getPersonRightNumFn();
        },
        fail: (err) => {
          uni.showToast({
            title: "支付失败,请您重新支付",
            icon: "none",
            duration: 3000,
          });
        },
      });
    },
    //还要订阅一下支付，退费相关信息
    handlePaySubscribe() {
      uni.requestSubscribeMessage({
        tmplIds: ["neXhGgVHV7JGNqQZOfu30pQmQcZIFUy73CBvK5OF98M"],
        complete: (res) => {
          Object.keys(res).forEach((key) => {
            if (res[key] === "accept") {
              this.addCartAndToOrder();
            }
          });
        },
      });
    },
    returnSxhHome() {
      if (this.from == "sxh") {
        uni.navigateBack();
      } else if (this.from == "fromSxhQrCode" || this.from == "fromZTJQrCode") {
        uni.reLaunch({ url: "/pagesSub/userCenter/careerPathV2/index" });
      }
    },
    handleBottomBtnClick() {
      if (!this.personId) {
        this.needloginAction();
        return;
      }
      this.handlePaySubscribe();
    },
    showBuyList() {
      if (!this.personId) {
        this.needloginAction();
        return;
      }
      this.showPopup = true;
      this.currentPackage = 0;
    },
    closePopup() {
      this.showPopup = false;
    },
    // 自动配置职业
    recommendPosition() {
      this.personId = this.personId || undefined;
      // console.log("recommendPosition:" + this.personId);
      if (!this.personId) {
        return;
      }

      const params = {
        personId: this.personId,
        pageNo: this.popupPageNo,
        pageSize: 3,
      };
      reqRecommendPosition(params).then((res) => {
        // console.log("🚀 ~ 自动配置职业 ~ res", res);
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.popupArray = res.data;
            this.popupIsShow = true;
          } else {
            this.popupIsShow = false;
          }
        }
      });
    },

    clickPopupChange() {
      this.popupPageNo += 1;
      this.recommendPosition();
    },
    goToAIInterviewWithItem(item) {
      this.popupIsShow = false;
      this.clickMajorItem(item);
      this.pointCount(7);
    },

    //获取权益使用数
    getRightUseNumber(item) {
      getPersonOneRight({
        rightId: 17,
        personId: this.personId,
      }).then((res) => {
        this.$nextTick(() => {
          if (res.data && res.data.userNum) {
            this.userNum = res.data.userNum || 0;
            // this.swiperCurrent = this.rightCount == this.userNum ? 1 : 0;
          }
        });
      });
    },

    // 数据统计
    pointCount(index) {
      let indexDesc =
        index == 3
          ? "进入了职业选择页面"
          : index == 6
          ? "开始了搜索职业"
          : "职业配置弹窗立即体验按钮";
      const params = {
        personId: this.personId,
        platform: "1",
        optCode: "aiPromotion",
        subOptCode: indexDesc,
        optIndex: index,
        description: "首页AI面评推广",
        moduleType: "demonstrate", // 模块类型(zt:职途，zph：招聘会活动-百职万岗，demonstrate：演示-扎堆)
      };
      refAddPoint(params).then((res) => {
        // console.log("🚀 ~ refAddPoint ~", index, "~ res", res);
      });
    },

    needloginAction() {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
      }
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.getRightUseNumber();
      this.getCardRightPackageFn();
      this.getPersonRightNumFn();
      this.recommendPosition();
      this.cardRegistFn();
      this.getPersonRightNumFn();
    },
    // 换绑卡
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        cardType: this.cardType,
        force: 1, //  强行绑卡 ，会触发换绑操作,一定成功
      };
      const res = await cardRegist(params);
      return res;
    },
    updateUserNum(val) {
      // this.userNum = val;
    },
    getSearchBottom() {
      // console.log("majorSearchAI getSearchBottom", this.from);
      const { screenHeight } = uni.getSystemInfoSync();
      uni
        .createSelectorQuery()
        .in(this)
        .select(".styleSearchContainer")
        .boundingClientRect((rect) => {
          if (rect != null && rect.bottom != null) {
            this.searchBottom = rect.bottom;
          }
        })
        .exec();
    },
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.tabsSwiper.$refs.tabs.setDx(dx);
    },
    handleAnimation(e) {
      console.log("切换tab-----------" + e.detail.current);
      let current = e.detail.current;
      // this.$refs.tabsSwiper.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    closeBubble() {
      this.isShowBubble = false;
    },
    getStatusBarHeight() {
      const res = uni.getSystemInfoSync();
      this.statusBarHeight = res.statusBarHeight;
      this.titleBarMarginTop = this.statusBarHeight + "px";
      // console.log("statusBarHeight:" + this.statusBarHeight + "px");
      this.bubbleMarginTop = this.statusBarHeight + uni.upx2px(88) + "px";
      // console.log("bubbleMarginTop:" + this.bubbleMarginTop);
      const screenHeight = res.windowHeight;
      // console.log("windowHeight:" + screenHeight);
      this.contentHeight =
        screenHeight - uni.upx2px(196) - this.statusBarHeight + "px";
      // console.log("contentHeight:" + this.contentHeight);

      const platform = res.platform;
      // console.log("手机平台" + platform);
    },
    clickBack() {
      console.log("clickBack");
      uni.navigateBack();
    },
    clickHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    clickSearch() {
      // console.log("clickSearch");
      this.isInputMode = true;
      this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";
    },
    clickInput() {
      // console.log("--开始搜索");
      this.isInputMode = true;
      this.isShowMajorList = true;
      this.isShowBubble = false;
      this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";

      this.pointCount(6);
    },
    clickClear() {
      this.inputModeText = "";
      this.isShowClear = false;
      this.isShowEmpty = false;
      this.loadingType = "nomore";
      this.majorListParam.pageNo = 1;
      this.list = [];
      this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";

      this.inputModeIsFocus = false;
      setTimeout(() => {
        this.inputModeIsFocus = true;
      }, 0);
    },
    clickCancel() {
      // console.log("clickCancel");
      this.isShowMajorList = false;
      this.isInputMode = false;
      this.inputModeText = "";
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.list = [];
      this.isShowMajorFilter = true;
      this.srcBg =
        this.$imgBaseSelf +
        "career/positionDictionary/bg_major_searchhome.webp";
    },
    onInputChanged(value) {
      // console.log("onInputChanged:" + value);
      this.loadingType = "loadmore";
      this.majorListParam.pageNo = 1;
      if (value && value.length > 0) {
        this.isShowClear = true;
        this.zhituSearchOn(value);
      } else {
        this.isShowClear = false;
        this.isShowEmpty = false;
        this.list = [];
      }
    },
    // 搜索
    zhituSearchOn(key) {
      if (this.loadingType == "loadmore" && this.isFirstLoad) {
        this.isFirstLoad = false;
        this.loadingType = "loading";
        this.majorListParam.pageNo = 1;
        this.list = [];
        const params = {
          matchName: key,
          pageNo: this.majorListParam.pageNo,
          pageSize: this.majorListParam.pageSize,
        };
        matchPositionListNew(params)
          .then((res) => {
            // console.log("zhituSearchOn:", res);
            if (res.code == 200) {
              this.list = res.data;
              this.majorListParam.pages = res.pageparam.pages;
              this.majorListParam.pageNo++;
              this.loadingType = "loadmore";
              // console.log("完成加载:" + this.majorListParam.pageNo);
            }
            this.isFirstLoad = true;
          })
          .catch((e) => {
            console.log(e);
            this.loadingType = "loadmore";
            this.isFirstLoad = true;
          });
      }
    },
    // 获取职业列表(数据写死固定的)
    zhituGetStartInfo() {
      if (this.isLoading || !this.personId) {
        return;
      }
      this.isLoading = true;
      let params = {
        personId: this.personId,
      };
      reqZhituGetCareer(params)
        .then((res) => {
          this.isLoading = false;
          if (res.code == 200) {
            this.positionTree = res.data.positionTree;
            if (this.inputModeText) {
              this.list = this.zhituHandleSearchOn(this.inputModeText);
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "error",
            });
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    zhituHandleSearchOn(key) {
      const searchStuffArray = [];
      this.positionTree.forEach((secondDimension) => {
        secondDimension.children.forEach((thirdDimension) => {
          thirdDimension.children.forEach((item) => {
            if (item.positionName.includes(key)) {
              searchStuffArray.push(item);
            }
          });
        });
      });
      return searchStuffArray;
    },
    onRefresh() {
      console.log("onRefresh");
    },
    onLoadMore() {
      // console.log(
      //   "onLoadMore:" +
      //     this.majorListParam.pageNo +
      //     " " +
      //     this.majorListParam.pages +
      //     " " +
      //     this.loadingType
      // );
      if (this.loadingType == "loadmore") {
        if (this.majorListParam.pageNo <= this.majorListParam.pages) {
          this.loadingType = "loading";
          const params = {
            matchName: this.inputModeText,
            pageNo: this.majorListParam.pageNo,
            pageSize: this.majorListParam.pageSize,
          };
          matchPositionListNew(params)
            .then((res) => {
              if (res.code == 200) {
                this.list.push(...res.data);
                this.majorListParam.pageNo++;
                // console.log(this.list);
                // console.log("完成加载更多:" + this.majorListParam.pageNo);
              }
              this.loadingType = "loadmore";
            })
            .catch((e) => {
              this.loadingType = "loadmore";
              console.log(e);
            });
        } else {
          this.loadingType = "nomore";
        }
      }
    },
    onScroll(event) {
      // console.log(event);
    },
    highLightText(content) {
      if (!content) {
        return;
      }
      const regex = new RegExp(this.inputModeText, "gi");
      const highlightedText = content.replace(
        regex,
        '<span style="color:#F75A3E;">' + this.inputModeText + "</span>"
      );
      return highlightedText;
    },
    clickEmptyPage() {
      // console.log("clickEmptyPage");
      this.isInputMode = false;
      this.inputModeText = "";
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.clickCancel();
    },
    clickMajorItem(item) {
      console.log("clickMajorItem", item);
      if (!this.personId) {
        this.needloginAction();
        return;
      }
      if (this.isConsultant) {
        //顾问身份进入这个页面不能进行选择
        uni.showToast({
          title: "顾问身份无法选择职业",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      var pid = item.ylPositionId;
      if (!pid) {
        pid = item.positionId;
      }
      this.positionId = pid;
      this.checkStartOnAIInterView(pid);
    },
    checkStartOnAIInterView(positionId) {
      this.isLoading = true;
      let modelType = "";
      if (this.from == "zhadui") {
        modelType = "demonstrate";
      }
      let params = {
        personId: this.personId,
        positionId: positionId,
        modelType: modelType,
      };
      reqZhituHasFinished(params)
        .then((res) => {
          this.isLoading = false;
          let type = this.from == "zhadui" ? "zhadui" : "zhitu";
          this.type = type;
          console.log("type:" + type + " this.channel:" + this.channel);
          if (res.code == 200) {
            if (res.data.status == "not_finished") {
              let record = res.data.id;
              this.record = record;
              let infoId = res.data.infoId;
              this.infoId = infoId;
              this.showConfirmCancelDialog(
                this.type,
                this.positionId,
                this.record,
                this.channel,
                this.infoId
              );
            } else {
              uni.navigateTo({
                url:
                  "/pagesSub/companyCenter/interviewAI/room/interviewReady?from=" +
                  type +
                  "&careerId=" +
                  positionId +
                  "&channel=" +
                  this.channel +
                  "&personId=" +
                  this.personId,
              });
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    showConfirmCancelDialog(type, positionId, record, channel, infoId) {
      this.type = type;
      this.positionId = positionId;
      this.record = record;
      this.channel = channel;
      this.infoId = infoId;
      this.isConfirmCancelModalShow = true;
    },
    onClickConfirm() {
      uni.navigateTo({
        url:
          "/pagesSub/companyCenter/interviewAI/room/interviewReady?from=" +
          this.type +
          "&careerId=" +
          this.positionId +
          "&recordId=" +
          this.record +
          "&channel=" +
          this.channel +
          "&infoId=" +
          this.infoId +
          "&personId=" +
          this.personId,
      });
    },
    onClickCancel() {
      uni.navigateTo({
        url:
          "/pagesSub/companyCenter/interviewAI/room/interviewReady?from=" +
          this.type +
          "&careerId=" +
          this.positionId +
          "&channel=" +
          this.channel +
          "&personId=" +
          this.personId,
      });
    },
    onBlur() {
      console.log("--结束搜索");
    },
    clickScrollView() {
      // console.log("clickScrollView");
      if (this.list.length <= 0) {
        this.clickCancel();
      }
    },
    startAnimation() {
      this.isShowAnim = true;
      setTimeout(() => {
        // console.log("setTimeout");
        this.isShowAnim = false;
      }, 500);
    },
    commitBuringPoint() {
      let modelType = "";
      if (this.from == "zhadui") {
        modelType = "demonstrate";
      }
      let params = {
        optCode: "enterMajorSearchAI",
        platform: "1",
        personId: this.personId,
        moduleType: modelType,
        remark: this.channel,
      };
      refAddPoint(params).then((res) => {
        if (res.code == 200) {
          // console.log("commitBuringPoint", res);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$img-base-careerPath: $img-base + "careerPath/";

@keyframes animationScale {
  from {
    transform: scale(0);
    //从左上角开始缩放
    transform-origin: left top;
  }

  to {
    transform: scale(1);
  }
}

.styleContainer {
  // background: linear-gradient(180deg, #EFF4FF 0%, #FFFFFF 100%);
  //   background-image: url($img-base + "career/positionDictionary/bg_major_search.webp");
  background-size: 100% 100%;
  height: 100vh;
  position: relative;

  .swiper-box {
    height: calc(100vh - 323rpx);
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding-top: 20rpx;
  }

  .styleSearchContainer {
    display: flex;
    position: relative;
    height: 80rpx;
    background-color: #f4f6f8;
    margin-left: 32rpx;
    margin-right: 32rpx;
    // box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
    border-radius: 16rpx;
    // filter: blur(0px);
    margin-top: 15rpx;
    margin-bottom: 4rpx;

    .styleInput {
      height: 80rpx;
      margin-left: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw; // width: 100%;
      margin-right: 80rpx;
    }

    .styleSearchIcon {
      position: absolute;
      top: 50%;
      right: 28rpx;
      transform: translateY(-50%);
      width: 40rpx;
      height: 40rpx;
    }

    .overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  .styleSearchInputModeContainer {
    display: flex;
    position: relative;
    height: 80rpx;
    background-color: #ffffff;
    margin-left: 32rpx;
    margin-right: 32rpx;
    box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
    border-radius: 16rpx;
    filter: blur(0px);
    margin-top: 15rpx;
    margin-bottom: 4rpx;

    .styleInput {
      height: 80rpx;
      margin-left: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw; // width: 100%;
      margin-right: 140rpx;
    }

    .styleClearContainer {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      right: 28rpx;
      transform: translateY(-50%);

      .styleClearIcon {
        width: 32rpx;
        height: 32rpx;
      }

      .styleCancelText {
        font-weight: 400;
        color: #888888;
        line-height: 36rpx;
        font-size: 28rpx;
        margin-left: 12rpx;
      }
    }
  }
}

.styleMajorList {
  background-color: transparent;
  margin-top: 12rpx;

  .styleScrollView {
    height: calc(100vh - 500rpx);

    .styleItem {
      display: flex;
      flex-direction: column;
      width: 100vw;
      justify-content: center;

      .styleName {
        font-weight: 400;
        color: #222222;
        line-height: 40rpx;
        font-size: 30rpx;
        margin-top: 36rpx;
        margin-left: 32rpx;
        margin-right: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .styleDesciption {
        font-weight: 400;
        color: #888888;
        line-height: 40rpx;
        margin-top: 16rpx;
        margin-left: 32rpx;
        margin-right: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .styleLine {
        margin-left: 32rpx;
        margin-right: 32rpx;
        height: 2rpx;
        background: #dde7f9;
        margin-top: 36rpx;
      }
    }

    .styleBottom {
      background-color: transparent;
      height: 50rpx;
    }
  }
}

.styleTopContainer {
  .aititle {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-text {
      margin-left: 32rpx;
      margin-top: 16rpx;
      font-size: 44rpx;
      font-weight: 800;
      color: #000000;
      line-height: 60rpx;
    }

    &-task {
      margin-right: 32rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
      line-height: 36rpx;
    }

    &-on {
      margin-left: 16rpx;
      font-size: 48rpx;
      font-weight: 800;
      color: #333333;
    }
  }

  .styleTitleContainer {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .styleTitleLeft {
      flex: 1;

      .styleGoBack {
        width: 44rpx;
        height: 44rpx;
        margin-left: 32rpx;
      }
    }
  }

  .styleEmpty {
    width: 100vw;
    height: calc(100vh - 266rpx);
    font-weight: 400;
    color: #222222;
    line-height: 36rpx;
    font-size: 28rpx;
    text-align: center;
    padding-top: 48rpx;
  }
}

.footer-wrapper {
  position: fixed;
  bottom: 50rpx;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: calc(100vw - 80rpx);
  height: 100rpx;
  margin: 0 40rpx;
  z-index: 99;
  .buyPackage,
  .buySingle {
    width: 328rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .buyPackage {
    position: relative;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffe0a1;
    line-height: 36rpx;
    background: linear-gradient(270deg, #38342b 0%, #413f3f 100%);

    .least-price {
      position: absolute;
      width: 132rpx;
      height: 34rpx;
      background-image: url($img-base-careerPath + "AiLeastPrice.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      top: -16rpx;
      left: 64rpx;
    }
  }

  .buySingle {
    font-family: PingFang-SC, PingFang-SC;
    /* font-weight: 800; */
    font-size: 32rpx;
    color: #ffffff;
    line-height: 44rpx;
    background-color: #ff711e;

    view {
      font-size: 24rpx;
    }
  }
}
.btn-box {
  width: calc(100vw - 64rpx);
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 40rpx;
  left: 32rpx;
  .check-btn {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
    background: #f75a3e;
  }
}
</style>
